<template>
  <div class="datain_main_box">
    <p class="_main_box_title">{{ title }}</p>
  </div>
  <el-form label-width="120px">
    <el-form-item label="评价指标：">
      <el-checkbox-group v-model="selectedItems">
        <el-checkbox v-for="(t) in ModeData.fieldInfoDatas" :key="t.apiFieldInfoId" :label="t.apiFieldInfoId"
          @change="changeSelect(t)">{{
            t.remark
          }}</el-checkbox>
      </el-checkbox-group>

    </el-form-item>
    <el-form-item label="评分标准：">
      <table style="text-align: center;">
        <tr>
          <th style="width:200px">评价指标</th>
          <th style="width:200px">3分</th>
          <th style="width:200px">5分</th>
          <th style="width:200px">8分</th>
          <th style="width:200px">10分</th>
        </tr>
        <tbody>
          <tr v-for="(item) in tableList" :key="item.apiFieldInfold">
            <td>{{ item.remark }}</td>
            <template v-if="item.dataSetType == 1">
              <td v-for=" index in 4" :key="index">
                <div>
                  <el-input type="text" v-model="item.column[index - 1].value" @blur="handleMinInput(item)" />
                  <span v-if="index == 1">
                    ≥ x ≥
                  </span>
                  <span v-else>
                    &gt; x ≥ </span>
                  <el-input type="text" v-model="item.column[index].value" @blur="handleMinInput(item)" />
                </div>
              </td>
            </template>
            <template v-if="item.dataSetType == 2">
              <td v-for=" index in 4" :key="index">
                <el-input type="text" v-model="item.column[index - 1].value" @blur="handleMinInput(item)" />
                <span v-if="index == 1">
                  ≤ x ≤
                </span>
                <span v-else>
                  &lt; x ≤ </span>
                <el-input type="text" v-model="item.column[index].value" @blur="handleMinInput(item)" />
              </td>
            </template>
            <template v-if="item.dataSetType == 3">
              <td v-for=" index in 4" :key="index">
                <MySelect v-model="item.column[index - 1].value" :item="item"
                  @onHandleCanSelectUnique="onHandleCanSelectUnique(item, index)"
                  @handleDisabledUnique="handleDisabledUnique(item)" />
              </td>
            </template>
            <template v-if="item.dataSetType == 4">
              <td v-for=" index in 4" :key="index">
                <MulSelect v-model="item.column[index - 1].value" :item="item" @handleDisabled="handleDisabled"
                  @onHandleCanSelect="handleCanSelect" />
              </td>
            </template>
          </tr>
        </tbody>
      </table>
    </el-form-item>
    <el-form-item label="指标权重：" prop="indicatorWeight" :rules="indicatorWeightRules">
      <div v-for="(item) in tableList" :key="item.apiFieldInfold"
        style="display:flex;margin-bottom:20px;margin-left:40px;">
        <div style="margin-right:5px">{{ item.remark }}:</div>
        <el-input-number type="number" v-model="item.indicatorWeight" :min="0" :max="100"></el-input-number>%
      </div>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { ref, watch, onDeactivated, onMounted, nextTick } from "vue"
import MulSelect from './mulSelect.vue';
import MySelect from './select.vue'
defineProps({
  ModeData: {
    type: Object,
    default: [{
      value: "",
      label: ""
    }]
  },
  title: {
    type: String,
    default: "模型名称"
  },
})
const selectedItems = ref() //存放xuanzhongid
const tableList = ref([]) //存放已选的选项数据放进table
const changeSelect = (item) => {
  for (let i = 0; i < tableList.value.length; i++) {
    if (tableList.value[i].apiFieldInfoId == item.apiFieldInfoId) {
      tableList.value.splice(i, 1); // 删除已有项
      return;
    }
  }
  // 生成一条保存的数据
  if (item.dataSetType == 1 || item.dataSetType == 2) {
    item.column = [
      {
        id: item.dataField + 'input1',
        value: '',
      },
      {
        id: item.dataField + 'input2',
        value: '',
      },
      {
        id: item.dataField + 'input3',
        value: '',
      },
      {
        id: item.dataField + 'input4',
        value: '',
      },
      {
        id: item.dataField + 'input5',
        value: '',
      },
    ];
  } else {
    item.column = [
      {
        id: item.dataField + 'select1',
        value: '',
      },
      {
        id: item.dataField + 'select2',
        value: '',
      },
      {
        id: item.dataField + 'select3',
        value: '',
      },
      {
        id: item.dataField + 'select4',
        value: '',
      },
    ];
  }
  item.selectOption.forEach(el => {
    el.disabled = false
  });
  item.indicatorWeight = ''
  // 将新项推入数组
  tableList.value.push(item);
  nextTick(() => {
  });
}

//处理单选选禁用
function handleDisabledUnique(item) {
  let arr = item.column.map(item => item.value)
  item.selectOption.forEach(b => {
    if (arr.includes(b.selectId)) {
      b.disabled = true
    } else {
      b.disabled = false
    }
  })
}
//处理单选清楚
function onHandleCanSelectUnique(item, index) {
  item.column[index - 1].value = ''
  let arr = item.column.map(item => item.value)
  item.selectOption.forEach(b => {
    if (arr.includes(b.selectId)) {
      b.disabled = true
    } else {
      b.disabled = false
    }
  })
}
//处理多选禁用
function handleDisabled(id, name) {
  tableList.value
    .filter(item => item.apiFieldInfoId === id)
    .forEach(item => {
      item.selectOption.forEach(a => {
        if (name.includes(a.selectId)) {
          console.log('我进来了');

          a.disabled = true;
        }
      });
    });
}
//处理可多选
function handleCanSelect(id, name) {
  tableList.value
    .filter(item => item.apiFieldInfoId === id)
    .forEach(item => {
      item.selectOption.forEach(a => {
        if (a.selectId === name) {
          a.disabled = false
        }
      });
    });
}

const indicatorWeightRules = [
  {
    trigger: "blur", // 触发校验的时机
    validator: (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入数值"));
      } else if (value < 0 || value > 100) {
        callback(new Error("请输入0到100范围内的数值"));
      } else {
        callback();
      }
    }
  }
]


function handleMinInput(item) {
  if (item.minValue == -1 || item.maxValue == -1) {
    return
  }
  if (item.column[0].value !== '') {
    if (item.column[0].value < item.minValue) {
      console.log(item.column[0].value);
      ElMessage.warning(`输入值不得小于${item.minValue}`)
      item.column[0].value = ''
      return
    }
    if (item.column[0].value > item.maxValue) {
      console.log(item.column[0].value);
      ElMessage.warning(`输入值不得大于${item.maxValue}`)
      item.column[0].value = ''
      return
    }
  }
  if (item.column[4].value !== '') {
    if (item.column[4].value < item.minValue) {
      ElMessage.warning(`输入值不得小于${item.minValue}`)
      item.column[4].value = ''
      return
    }
    if (item.column[4].value > item.maxValue) {
      ElMessage.warning(`输入值不得大于${item.maxValue}`)
      item.column[4].value = ''
      return
    }
  }

}



onMounted(() => {
})
defineExpose({
  tableList
});
</script>

<style scoped lang="scss">
.el-input {
  width: 30%;
}

.datain_main_box {
  ._main_box_title {
    width: 100%;
    line-height: 36px;
    height: 36px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
    border-left: 3px solid #2b65a7;
    background-color: #efefee;
    margin: 10px 0;
  }
}


table,
th,
td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
  ;
}
</style>